<template>
  <el-dialog title="批量更换SN码" :visible.sync="showFlag" :modal="false" width="80%" append-to-body @close="cancel">
    <div class="app-container" style="padding-top: 0px">
      <el-radio-group v-model="opeType" style="width: 100%;text-align: center;">
        <el-radio :label="2">沿用原有的SN码</el-radio>
        <el-radio :label="1">直接修改</el-radio>
      </el-radio-group>
      <div v-show="opeType == 2">
        <!-- 2024-12-17 djj 沿用原有的SN码：增加两个TAB选项，委外业务和自制业务，默认显示委外业务页面 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="委外业务" name="wwyw">
            <div class="contentDiv" style="overflow-y: auto;">
              <el-form ref="form" class="perForm" :model="caseInfo" size="medium" :inline="true" style="max-width: 800px; margin: 10px auto 0;">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="原有SN码:" prop="newSnCode">
                      <el-input type="textarea" :rows="3" v-model="caseInfo.newSnCode" @keyup.enter.native="handleNewSnCode" />
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                      <el-checkbox-group v-model="caseInfo.newSnCode2" @change="changeNewSnCode" style="max-height:150px;overflow-y: auto;">
                        <el-checkbox :label="item" v-for="item in codeList" :key="item" style="width: 100%;margin-right: 0;">{{ item
                          }}</el-checkbox>
                      </el-checkbox-group>
                      <label>选择数量【<span class="numberColor">{{ newSnCodeArr.length }}</span>】</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="待修改SN码:" prop="reportSn">
                      <el-input type="textarea" :rows="10" v-model="caseInfo.reportSn" :disabled="true">
                      </el-input>
                      <label>修改数量【<span class="numberColor">{{ reportSnArr.length }}</span>】</label>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirmSelect(2, 'outsource')">确 定</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="自制业务" name="zzyw">
            <div class="contentDiv" style="overflow-y: auto;">
              <!-- 分两步，第一步选择工单，第二步选择sn码 -->
              <div v-show="stepIndex == 0">
                <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" style="margin-top: 10px;">
                  <el-form-item label="工单编号" prop="workorderCode">
                    <el-input v-model="queryParams.workorderCode" placeholder="请输入工单编号" clearable @keyup.enter.native="handleQuery" />
                  </el-form-item>
                  <el-form-item label="工单类型" prop="orderType">
                    <el-select v-model="queryParams.orderType" placeholder="请选择工单类型" clearable @keyup.enter.native="handleQuery">
                      <el-option v-for="item, index in dict.type.mes_order_type" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="流程状态" prop="workflowStatus">
                    <el-select v-model="queryParams.workflowStatus" placeholder="请选择流程状态" clearable>
                      <el-option v-for="dict in dict.type.workflow_status" :key="dict.value" :label="dict.label" :value="Number(dict.value)"></el-option>
                    </el-select>
                  </el-form-item>

                  <el-form-item label="产品编号" prop="productCode">
                    <el-input v-model="queryParams.productCode" placeholder="请输入产品编号" clearable @keyup.enter.native="handleQuery" />
                  </el-form-item>
                  <el-form-item label="产品名称" prop="productName">
                    <el-select filterable clearable placeholder="请输入产品名称" v-model="queryParams.productName" @keyup.enter.native="handleQuery" remote @clear="onClearProductName" :loading="productNameListLoading" :remote-method="remoteGetProductNameList">
                      <el-option v-for="(item, index) in productNameList" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                    <!-- edit end by zyj 2024/10/17 产品名称支持模糊搜索下拉-->
                  </el-form-item>
                  <el-form-item label="单据日期" prop="fDate">
                    <el-date-picker clearable v-model="queryParams.fDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择需求日期"></el-date-picker>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                  </el-form-item>
                </el-form>
                <el-table v-loading="loading" :data="workorderList" row-key="workorderId" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" height="calc(100vh - 350px)" @current-change="handleCurrentChange">
                  <el-table-column type="radio" width="55">
                    <template slot-scope="scope">
                      <el-radio :label="scope.row.workorderId" v-model="selectedId" @change.native="handleCurrentChange(scope.row)">{{ '' }}</el-radio>
                    </template>
                  </el-table-column>
                  <el-table-column label="序号" align="center" width="50px">
                    <template slot-scope="scope">
                      <span>{{ scope.$index + 1 }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="生产工单id" align="center" prop="workorderId" width="110"></el-table-column>
                  <el-table-column label="工单编号" align="center" prop="billNo" width="110"></el-table-column>
                  <el-table-column label="单据日期" align="center" prop="fDate" width="160"></el-table-column>
                  <el-table-column label="类型" align="center" prop="orderType">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.mes_order_type" :value="scope.row.orderType" />
                    </template>
                  </el-table-column>
                  <el-table-column label="工单状态" align="center" prop="status">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.mes_workorder_status" :value="scope.row.status" />
                    </template>
                  </el-table-column>

                  <el-table-column label="流程状态" align="center" prop="workflowStatus">
                    <template slot-scope="scope">
                      <dict-tag :options="dict.type.workflow_status" :value="scope.row.workflowStatus" />
                    </template>
                  </el-table-column>
                  <el-table-column label="物料编码" width="150" align="center" prop="productCode" />
                  <el-table-column label="物料名称" width="180" align="center" prop="productName" :show-overflow-tooltip="true" />
                  <el-table-column label="规格型号" width="220" align="center" prop="productSpc" :show-overflow-tooltip="true" />
                  <el-table-column label="单位" align="center" prop="unitName" />
                  <el-table-column label="工单数量" align="center" prop="quantity" />
                  <el-table-column label="已生产数量" align="center" width="100px" prop="quantityProduced" />
                  <el-table-column label="批次号" align="center" min-width="220px">
                    <template slot-scope="scope">
                      <span v-if="scope.row.batchName != null">{{
                        scope.row.batchName
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="领料状态" align="center" width="100px">
                    <template slot-scope="scope">
                      <span>
                        {{
                          scope.row.isIssue == "0"
                            ? "未领料"
                            : scope.row.isIssue == "1"
                              ? "全部领料"
                              : scope.row.isIssue == "2"
                                ? "部分领料"
                                : "--"
                        }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
                <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" :page-sizes="[50, 100, 200, 300, 400, 500]" @pagination="getList" />
              </div>
              <div v-show="stepIndex == 1">
                <el-form ref="form" class="perForm" :model="caseInfo" size="medium" :inline="true" style="max-width: 800px; margin: 10px auto 0;">
                  <!-- 注意注意，这里的原有SN码，待修改SN码与直接修改的两个参数相反！！！  -->
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="原有SN码" prop="newSnCode">
                        <el-input type="textarea" :rows="3" v-model="caseInfo.newSnCode" @keyup.enter.native="handleNewSnCode" />
                        <el-checkbox :indeterminate="isIndeterminate2" v-model="checkAll2" @change="handleCheckAllChange2">全选</el-checkbox>
                        <el-checkbox-group v-model="caseInfo.newSnCode2" @change="changeNewSnCode" style="max-height:150px;overflow-y: auto;">
                          <el-checkbox :label="item" v-for="item in newSnCodeList" :key="item" style="width: 100%;margin-right: 0;">{{ item
                            }}</el-checkbox>
                        </el-checkbox-group>
                        <label>选择数量【<span class="numberColor">{{ newSnCodeArr.length }}</span>】</label>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="待修改SN码:" prop="reportSn">
                        <el-input type="textarea" :rows="10" v-model="caseInfo.reportSn" :disabled="true">
                        </el-input>
                        <label>修改数量【<span class="numberColor">{{ reportSnArr.length }}</span>】</label>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="cancel">取 消</el-button>
                <el-button @click="stepIndex = 0" v-if="stepIndex == 1">上一步</el-button>
                <el-button type="primary" @click="nextStep" v-if="stepIndex == 0">下一步</el-button>
                <el-button type="primary" @click="confirmSelect(2, 'selfmade')" v-if="stepIndex == 1">确 定</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

      </div>
      <div v-show="opeType == 1">
        <div class="contentDiv">
          <el-form ref="form" class="perForm" :model="caseInfo" size="medium" :inline="true" style="max-width: 800px; margin: 10px auto 0;">
            <el-row>
              <el-col :span="caseInfo.orderType == 2 ? 8 : 12">
                <el-form-item label="系统SN码:" prop="reportSn">
                  <el-input type="textarea" :rows="10" v-model="caseInfo.reportSn" :disabled="true">
                  </el-input>
                  <label>修改数量【<span class="numberColor">{{ reportSnArr.length }}</span>】</label>
                </el-form-item>
                <label style="color: red; display: block;">1.如果直接复制到新SN码，需要用英文逗号(,)分割。</label>
                <label style="color: red; display: block;">2.如果扫码输入，每一个SN码都需要换行。</label>
              </el-col>
              <!-- 2024-12-17 djj 当工单类型为返工生产时,展示原SN码 -->
              <el-col :span="caseInfo.orderType == 2 ? 8 : 12" v-if="caseInfo.orderType == 2">
                <el-form-item label="原SN码" prop="remakeOldSnCodes">
                  <el-input type="textarea" :rows="3" v-model="caseInfo.remakeOldSnCodes" @keyup.enter.native="handleRemakeOldSnCodes" />
                  <div style="display: flex;">
                    <el-checkbox :indeterminate="isIndeterminate3" v-model="checkAll3" @change="handleCheckAllChange3" style="margin-right: 10px;">全选</el-checkbox>
                    <el-input placeholder="请输入数量" v-model="checkNumber" style="flex:1">
                      <el-button slot="append" icon="el-icon-search" @click="setCheckNumber"></el-button>
                    </el-input>
                  </div>
                  <el-checkbox-group v-model="caseInfo.remakeOldSnCodes2" @change="changeRemakeOldSnCodes" style="max-height:170px;overflow-y: auto;">
                    <el-checkbox :label="item" v-for="item in remakeOldSnCodesList" :key="item" style="width: 100%;margin-right: 0;">{{ item }}</el-checkbox>
                  </el-checkbox-group>
                  <label>选择数量【<span class="numberColor">{{ remakeOldSnCodesArr.length }}</span>】</label>
                </el-form-item>
              </el-col>
              <el-col :span="caseInfo.orderType == 2 ? 8 : 12">
                <el-form-item label="新SN码:" prop="newSnCode">
                  <el-input type="textarea" :rows="10" v-model="caseInfo.newSnCode" style="overflow-y: auto;" />
                  <label>输入数量【<span class="numberColor">{{ getNewSnCodeLength }}</span>】</label>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer my-dialog-footer" style="text-align: center;">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="confirmSelect(1)">确 定</el-button>
        </div>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { listWorkorder, getProductNameList, } from "@/api/mes/pro/workorder";
import { batchSn, workorderSnList, queryPcbaInfoList } from "@/api/mes/pro/workorderSn";
import { printBatchCode, } from "@/api/mes/pro/keyMatchManagement.js";
export default {
  name: "batchModification",
  dicts: [
    "mes_workorder_status",
    "mes_order_status",
    "mes_order_type",
    "mes_workorder_sourcetype",
    "mes_workorder_runStatus",
    "mes_route_status",
    "workflow_status",
  ],
  data() {
    return {
      caseInfo: {
        newSnCode2: [],
        newSnCode: "",
        reportSn: "",
        remakeOldSnCodes: "",
        remakeOldSnCodes2: []
      },
      showFlag: false,
      opeType: 2,//更换类型
      stepIndex: 0,//第几步

      /* 2024-12-17 djj 沿用原有的SN码：增加两个TAB选项，委外业务和自制业务，默认显示委外业务页面 */
      activeName: 'wwyw',
      codeList: [],
      remakeOldSnCodesList: [],
      changeRemakeOldSnCodesList: [],


      // 第一步：生产工单表格数据
      // 显示搜索条件
      showSearch: true,
      //add begin by zyj 2024/10/17 产品名称支持模糊搜索下拉
      productNameList: [],
      //add end by zyj 2024/10/17 产品名称支持模糊搜索下拉
      productNameListLoading: false,
      loading: true,
      queryParams: { pageNum: 1, pageSize: 50, },
      total: 0,
      workorderList: [],
      selectedId: null,
      // 生产工单表格数据  end

      // 第二步设置新SN码
      newSnCodeList: [],
      changeNewSnCodeList: [],
      submitLoading: false,

      reportSnArr: [],
      newSnCodeArr: [],
      remakeOldSnCodesArr: [],
      reg: /\\n$/g,

      checkAll: false,
      isIndeterminate: false,

      checkAll2: false,
      isIndeterminate2: false,

      checkAll3: false,
      isIndeterminate3: false,
      checkNumber: null,
    };
  },
  computed: {
    // 计算新条形码数组的长度
    getNewSnCodeLength() {
      const newSnCodeArr = this.caseInfo.newSnCode.split(/[\n,]+/).filter(item => item.trim() !== ''); // 按照逗号和换行符拆分，并去除空白项
      return newSnCodeArr.length;
    }
  },
  methods: {
    init(ids, snCodes, workorderIds) {
      //旧sn集合
      this.caseInfo.reportSn = snCodes
      //id集合
      this.caseInfo.snId = ids
      //djj 新增workorderId工单ID集合
      this.caseInfo.snWorkorderId = workorderIds.map(item => item.workorderId)
      this.caseInfo.orderType = workorderIds.map(item => item.orderType)[0]
      //显示弹窗
      this.showFlag = true;
      /* 调用展示委外业务数据 */
      this.getQueryPcbaInfoList();
    },
    //add begin by zyj 2024/10/17 产品名称支持模糊搜索下拉
    onClearProductName() {
      this.remoteGetProductNameList();
    },
    remoteGetProductNameList(productName) {
      this.productNameListLoading = true;
      getProductNameList({ productName: productName }).then(res => {
        this.productNameList = res.data;
        this.productNameListLoading = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 查询生产工单列表 */
    getList() {
      if (!this.caseInfo.snWorkorderId || this.caseInfo.snWorkorderId.length == 0) {
        return false
      }
      this.loading = true;
      listWorkorder({ ...this.queryParams, remakeWorkorderId: this.caseInfo.snWorkorderId[0] }).then((response) => {
        this.workorderList = this.handleTree(
          response.rows,
          "workorderId",
          "parentId"
        );
        this.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    /* 选择新生产工单 */
    handleCurrentChange(row) {
      if (!row) {
        this.selectedId = null
        return
      }
      this.selectedId = row.workorderId
    },
    /* 下一步 按钮
    根据工单ID查询SN码
    */
    nextStep() {
      if (!this.selectedId) {
        this.$message.warning("请先选择生产工单哟！");
        return false;
      }
      this.stepIndex = 1
      this.dataList = []
      this.getWorkorderSnList()
    },
    /* 根据工单ID查询SN码 */
    getWorkorderSnList() {
      //this.selectedId  '3853773'
      workorderSnList({ workorderId: this.selectedId, opeType: this.opeType }).then((response) => {
        this.newSnCodeList = response.rows.map(item => item.snCode)
      }).catch(() => {
        this.newSnCodeList = []
      });
    },
    /* 复选框选择事件 */
    changeNewSnCode(value) {
      value = value.filter(item => item)
      this.changeNewSnCodeList = value
      this.caseInfo.newSnCode = value.join('\n')
      console.info('复选框', value, this.caseInfo.newSnCode)
    },
    /* 复选框选择事件 */
    handleNewSnCode() {
      this.caseInfo.newSnCode2 = this.caseInfo.newSnCode.split('\n')
    },
    /* 全选-委外业务 */
    handleCheckAllChange(val) {
      console.log("val", val)
      if (!val) {
        this.caseInfo.newSnCode2 = []
        this.changeNewSnCodeList = []
        this.caseInfo.newSnCode = ''
      } else {
        this.caseInfo.newSnCode2 = this.codeList;
        this.changeNewSnCodeList = []
        this.caseInfo.newSnCode = this.codeList.join('\n')
      }
      this.isIndeterminate = false;
    },
    /* 全选-自制业务 */
    handleCheckAllChange2(val) {
      if (!val) {
        this.caseInfo.newSnCode2 = []
        this.changeNewSnCodeList = []
        this.caseInfo.newSnCode = ''
      } else {
        this.caseInfo.newSnCode2 = this.newSnCodeList;
        this.changeNewSnCodeList = val
        this.caseInfo.newSnCode = this.newSnCodeList.join('\n')
      }
      this.isIndeterminate2 = false;
    },
    /* 全选-直接修改 */
    handleCheckAllChange3(val) {
      if (!val) {
        this.caseInfo.remakeOldSnCodes2 = []
        this.changeRemakeOldSnCodesList = []
        this.caseInfo.remakeOldSnCodes = ''
      } else {
        this.caseInfo.remakeOldSnCodes2 = this.remakeOldSnCodesList;
        this.changeRemakeOldSnCodesList = val
        this.caseInfo.remakeOldSnCodes = this.remakeOldSnCodesList.join('\n')
      }
      this.isIndeterminate3 = false;
    },
    /* 直接修改-设置勾选数量 */
    setCheckNumber() {
      if (!this.checkNumber) return
      this.caseInfo.remakeOldSnCodes2 = this.remakeOldSnCodesList.slice(0, this.checkNumber);
      this.caseInfo.remakeOldSnCodes = this.caseInfo.remakeOldSnCodes2.join('\n')
    },



    /* 沿用原有SN码-tabs点击事件 */
    handleClick(tab, event) {
      if (tab.name == 'wwyw') {
        this.getQueryPcbaInfoList();
      }
      // 查询生产工单列表
      if (tab.name == 'zzyw') {
        this.getList()
      }
    },

    /* 下一步 按钮
        根据工单ID查询SN码
        */
    getQueryPcbaInfoList() {
      queryPcbaInfoList({ workorderId: this.caseInfo.snWorkorderId[0] }).then((response) => {
        this.codeList = response.data.map(item => item.sequenceCode)
        this.remakeOldSnCodesList = response.data.map(item => item.sequenceCode)
      }).catch(() => {
        this.codeList = []
        this.remakeOldSnCodesList = []
      });
    },
    /* 复选框选择事件 */
    changeRemakeOldSnCodes(value) {
      value = value.filter(item => item)
      this.changeRemakeOldSnCodesList = value
      this.caseInfo.remakeOldSnCodes = value.join('\n')
    },
    /* 复选框选择事件 */
    handleRemakeOldSnCodes() {
      this.caseInfo.remakeOldSnCodes2 = this.caseInfo.remakeOldSnCodes.split('\n')
    },




    /**  确定
       * 2024-12-11 djj 新增
       * 类型： 1-直接修改 2-延用原有的SN码
       * 业务类型：outsource-委外，selfmade-自制
      */
    confirmSelect(opeType, busiType) {
      // this.handleSnData()

      let reg = /\\n$/g;
      let param = {
        snids: this.caseInfo.snId,
        newSnCode: '',
        snCodes: '',
        opeType: opeType,
      };

      if (opeType == 1) {

        if (!this.caseInfo.newSnCode) return this.$message.warning("请输入新的SN码！");
        if (this.caseInfo.orderType == 2) {
          if (this.reportSnArr.length != this.newSnCodeArr.length || this.newSnCodeArr.length != this.remakeOldSnCodesArr.length || this.reportSnArr.length != this.remakeOldSnCodesArr.length) return this.$message.warning("SN码数量不一致！");
        } else {
          if (this.reportSnArr.length != this.newSnCodeArr.length) return this.$message.warning("SN码数量不一致！");
        }
        //验证是否存在重复的SN
        let arr = this.caseInfo.newSnCode
        const snArr = arr
          .split(/[\n,]/) // 支持逗号或换行分隔
          .map(item => item.trim().toUpperCase())
          .filter(Boolean);

        const duplicates = snArr.filter((item, index, self) => self.indexOf(item) !== index);
        const uniqueDuplicates = [...new Set(duplicates)];

        if (uniqueDuplicates.length > 0) {
          this.$message.warning(`存在重复数据：${uniqueDuplicates.join('，')}`);
          return false;
        }

        param = {
          newSnCode: this.caseInfo.newSnCode,
          snids: this.caseInfo.snId,
          snCodes: this.caseInfo.reportSn,
          remakeOldSnCodes: this.remakeOldSnCodesArr.join(','),
          opeType: opeType
        }
      }
      if (opeType == 2) {
        if (this.reportSnArr.length != this.newSnCodeArr.length) {
          return this.$message.warning("SN码数量不一致！")
        }
        //判断是否有重复的数据
        const duplicates = this.newSnCodeArr.filter((item, index, self) => {
          return self.indexOf(item) !== index;
        });

        if (duplicates.length > 0) {
          const uniqueDuplicates = [...new Set(duplicates)];
          this.$message.warning(`存在重复数据：${uniqueDuplicates.join('，')}`);
          return false
        }
        param = {
          newSnCode: this.reportSnArr.join("\n"),
          snids: this.caseInfo.snId,
          snCodes: this.newSnCodeArr.join(','),
          remakeOldSnCodes: this.remakeOldSnCodesArr.join(','),
          opeType: opeType,
          busiType: busiType
        };
      }
      this.submitLoading = true
      console.log("sss")
      batchSn(param).then((res) => {

        if (res.code == 200) {
          this.$message.success(res.msg);
          this.$parent.getList();
          const data = res.data ? res.data : []
          //当工单产品类型为PCBA时才会返回 data
          if (data.length && data.length > 0) {
            printBatchCode(data).then(res2 => {
              console.log(res2)
            }).catch(err => {
              console.log(err)
            })
          }
          this.submitLoading = false
          this.showFlag = false;
          this.cancel()
        }
      }).catch(() => {
        this.submitLoading = false
      });
    },

    /* 取消、关闭按钮 */
    cancel() {
      this.showFlag = false;
      this.caseInfo = {
        newSnCode2: [],
        newSnCode: "",
        reportSn: "",
        remakeOldSnCodes: "",
        remakeOldSnCodes2: []
      }
      this.opeType = 2
      this.stepIndex = 0
      this.selectedId = null
      this.newSnCodeList = []
      this.codeList = []
      this.reportSnArr = []
      this.newSnCodeArr = []
      this.remakeOldSnCodesArr = []
    },

    /* 处理数据 */
    handleSnData() {
      this.reportSnArr = this.caseInfo.reportSn
        ? this.caseInfo.reportSn.split(',').filter(item => !!item)
        : [];

      this.newSnCodeArr = this.caseInfo.newSnCode
        ? this.caseInfo.newSnCode.replace(this.reg, '').split(/[\n,]+/).filter(item => !!item)
        : [];

      //选择数量
      this.remakeOldSnCodesArr = this.caseInfo.remakeOldSnCodes ? this.caseInfo.remakeOldSnCodes.replace(this.reg, '').split("\n").filter(item => !!item) : [];
      console.info(this.caseInfo, this.reportSnArr, this.newSnCodeArr, this.remakeOldSnCodesArr)
    },
  },
  watch: {
    "caseInfo.reportSn": {
      handler(newVal) {
        this.handleSnData();
      }, immediate: true
    },
    "caseInfo.newSnCode": {
      handler(newVal) {
        this.handleSnData();
      }, immediate: true
    },
    "caseInfo.remakeOldSnCodes": {
      handler(newVal) {
        this.handleSnData();
      }, immediate: true
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container ::v-deep .el-drawer__header {
  padding-top: 10px !important;
  padding-bottom: 5px !important;
  margin-bottom: 10px !important;
}

.dialog-footer {
  padding-top: 10px;
  text-align: right;
}

.el-table {
  margin-bottom: 15px;
}

.numberColor {
  font-weight: bold;
  color: red;
}
</style>
